<link rel="stylesheet" href="/assets/home/css/teacher_info.css" />

<!-- 下拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<!-- 引入http请求插件 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>

<div class="header wow">
    <div class="left">
        <div class="avatar">
            <img src="{$teacher.avatar_text}" />
        </div>
    </div>

    <div class="right">
        <div class="name">{$teacher.name}</div>
        <span>课程：{$teacher.count_text} 个</span>
        <span>职位：{$teacher.job}</span>
        <span>粉丝：<a href="">{$teacher.follows_text}</a></span>

        <div class="follow">
            {if condition="$teacher.follow"}
                <a href="{:url('home/teacher/follow', ['teacherid' => $teacher['id']])}" class="btn mui-btn-danger">取消关注</a>
            {else /}
                <a href="{:url('home/teacher/follow', ['teacherid' => $teacher['id']])}" class="btn mui-btn-primary">关注</a>
            {/if}
        </div>
    </div>
</div>

<div class="content wow">{$teacher.content ? $teacher.content : '这个人很懒什么都没写~'}</div>

<!-- 搜索框 -->
<div class="search mui-input-row mui-search wow">
    <input type="search" placeholder="请输入名师名称" name="search" />
</div>

<!-- 课程列表 -->
<div id="list">
    <ul class="mui-table-view list"></ul>
</div>


<script>
    //修改浏览器自带的后退按钮
    window.history.pushState(null, null, `#`);

    window.addEventListener('popstate', function(e){
        e.preventDefault()
        location.href = `{:url('home/teacher/index')}`
    }, false)

    

    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: "#list" // 可选滚动容器选择器，否则使用窗口
    }).init();

    var keywords = '';
    var page = 0; //当前页
    var limit = 10; //每页查询多少条

    $("input[name=search]").change(function(){
        keywords = $(this).val()
        DownCallback()
    })

    //配置下拉刷新和上拉加载
    var scroll =  new MeScroll('list', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            page: {
                num: page, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: limit //每页数据条数,默认10
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop:{ //配置回到顶部按钮
                duration: 300,
                src : "/assets/home/plugin/mescroll/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset : 100,
                supportTap : true, //快速响应
            }
        }
    })


    // 下拉刷新回调
    function DownCallback()
    {
        scroll.resetUpScroll()
        $('#list .list').empty()
    }

    // 上拉刷新回调
    async function UpCallback(current)
    {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page:page,
            limit:limit,
            keywords:keywords
        };

        var result = await POST({
            url:`/teacher/info?teacherid={$teacher.id}`,
            params: data
        })

        if(!result) return false

        if(result.code == 0)
        {
            mui.toast(result.msg, {duration: 1000})
            // 暂无更多数据
            scroll.endBySize(0, 0)
            return false
        }

        var list = result.data.list
        var count = result.data.count

        //设置上拉加载状态
        scroll.endBySize(list.length, count)
        FetchList(list)
    }

    // 追加渲染数据
    function FetchList(list)
    {
        for(var item of list)
        {
            var temp = `
            <li class="mui-table-view-cell mui-media wow" data-wow-delay="100ms">
                <a class="item" href="">
                    <div class="thumb">
                        <img class="img" src="${item.thumbs_text}">
                    </div>
                    <div class="info">
                        <h5 class="title">${item.title}</h5>
                        <p class="content mui-ellipsis">课程分类：${item.category.name ? item.category.name : '暂无分类'}</p>
                        <p class="content mui-ellipsis">创建时间：${item.createtime_text}</p>
                        <p class="bottom">
                            <span class="like mui-icon mui-icon-starhalf">
                                <span>${item.likes_text}</span>
                            </span>
                            <span class="price">￥${item.price}</span>
                        </p>
                    </div>
                </a>
            </li>
            `
            $('#list .list').append(temp)
        }
    }
</script>